<template>
  <div class="NvgMenu">
    <el-menu
      default-active="user"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
      unique-opened>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>用户管理</span>
        </template>
        <el-menu-item index="readUserInformation">用户信息录入</el-menu-item>
        <el-menu-item index="userInformation">用户信息查看</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>商品管理</span>
        </template>
        <el-menu-item index="commodityEnter">商品信息录入</el-menu-item>
        <el-menu-item index="commodityInformation">商品信息查看</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>订单管理</span>
        </template>
        <el-menu-item index="orderInformation">订单查看</el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>活动管理</span>
        </template>
        <el-menu-item index="registerInformation">活动信息录入</el-menu-item>
        <el-menu-item index="showBonusPenalty">活动信息查看</el-menu-item>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>广告管理</span>
        </template>
        <el-menu-item index="salaryR">广告信息录入</el-menu-item>
        <el-menu-item index="salaryL">广告信息查看</el-menu-item>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-coin"></i>
          <span slot="title">评价管理</span>
        </template>
        <el-menu-item index="managersR" class="el-icon-plus">&nbsp;评价信息录入</el-menu-item>
        <el-menu-item index="managersL" class="el-icon-search">&nbsp;评价信息查看</el-menu-item>
      </el-submenu>
      <el-submenu index="7">
        <template slot="title">
          <i class="el-icon-coin"></i>
          <span slot="title">商家管理</span>
        </template>
        <el-menu-item index="managersR" class="el-icon-plus">&nbsp;商家信息录入</el-menu-item>
        <el-menu-item index="managersL" class="el-icon-search">&nbsp;商家信息查看</el-menu-item>
      </el-submenu>
      <el-submenu index="8">
        <template slot="title">
          <i class="el-icon-coin"></i>
          <span slot="title">物流管理</span>
        </template>
        <el-menu-item index="managersR" class="el-icon-plus">&nbsp;物流信息录入</el-menu-item>
        <el-menu-item index="managersL" class="el-icon-search">&nbsp;物流信息查看</el-menu-item>
      </el-submenu>
      <el-submenu index="9">
        <template slot="title">
          <i class="el-icon-coin"></i>
          <span slot="title">消息管理</span>
        </template>
        <el-menu-item index="managersR" class="el-icon-plus">&nbsp;消息信息录入</el-menu-item>
        <el-menu-item index="managersL" class="el-icon-search">&nbsp;消息信息查看</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: "NvgMenu",
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      open() {
        this.$message('这是一条消息提示');
      },
    }
  }
</script>

<style scoped>
.NvgMenu{
  width: 100%;
  overflow: hidden;
}
.el-menu-vertical-demo{
  width: 100%;
}
</style>

